<template>
  <el-dialog :title="$t('task.components.taskAllotModal.viewAllotRule')" :visible.sync='ruleDialog' :before-close='beforeClose'>
    <el-form :model='ruleForm' label-position="top" >
      <el-form-item :label="$t('common.base.name')" prop="ruleName" required>
        <el-input type="text" size="mini" maxlength="10" disabled v-model="ruleForm.ruleName" :placeholder="$t('product.setting.qrCodeSet.pla1', {data1: '10'})"></el-input>
      </el-form-item>
      <el-form-item :label="$t('product.setting.qrCodeSet.label2')" required>
        <el-radio-group v-model="ruleForm.ruleType" disabled>
          <el-radio :label="1">{{$t('product.setting.qrCodeSet.label7')}}</el-radio>
          <el-radio :label="2">{{$t('product.setting.qrCodeSet.label8')}}</el-radio>
          <el-radio :label="3">{{$t('product.setting.qrCodeSet.label9')}}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item :label="$t('product.setting.qrCodeSet.label3')" required v-if="ruleForm.ruleType==2">
        <el-col :span="11">
          <el-form-item>
            <el-select size="mini" v-model="ruleForm.distributeCondition.include" disabled>
              <el-option :label="$t('common.base.include')" :value="1"></el-option>
              <el-option :label="$t('common.base.exclude')" :value="0"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item>
            <el-tooltip effect="dark" placement="top" :content="ruleForm.distributeCondition.address && ruleForm.distributeCondition.address.join()">
              <el-select size="mini" multiple collapse-tags v-model="ruleForm.distributeCondition.address" disabled>
                <el-option v-for="item in provinceList" :key="item" :label="item" :value="item"></el-option>
              </el-select>
            </el-tooltip>
          </el-form-item>
        </el-col>
      </el-form-item>
      <el-form-item :label="$t('product.setting.qrCodeSet.label4')" required v-if="ruleForm.ruleType==3">
        <el-col :span="8">
          <el-form-item>
            <el-select style="width:calc(100% - 65px)" v-model="ruleForm.distributeCondition.apply" size="mini" disabled>
              <el-option :label="$t('common.base.customer')" :value="'customer'"></el-option>
              <el-option :label="$t('common.base.product')" :value="'product'"></el-option>
            </el-select>
            {{$t('product.setting.qrCodeSet.label10')}}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item>
            <el-input v-model="ruleForm.distributeCondition.displayName" size="mini" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-select v-model="ruleForm.distributeCondition.equals" size="mini" disabled>
              <el-option :label="$t('common.base.equal')" :value="1"></el-option>
              <el-option :label="$t('common.base.notEqual')" :value="0"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item>
            <el-input style="width:calc(100% - 25px)" v-model="ruleForm.distributeCondition.option" size="mini" disabled></el-input>
            {{$t('common.time.hour')}}
          </el-form-item>
        </el-col>
      </el-form-item>
      <el-form-item :label="$t('product.setting.qrCodeSet.label5')" required>
        <el-col :span="11">
          <el-form-item>
            <el-select size="mini" v-model="ruleForm.distributeCondition.group" disabled>
              <el-option v-for="item in groupList" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span='12' v-if="ruleForm.distributeCondition.groupName">
          <el-form-item>
            <el-input v-model="ruleForm.distributeCondition.groupName" disabled v-show="ruleForm.distributeCondition.groupName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="ruleForm.candidate">
          <el-form-item>
            <el-tooltip effect="dark" placement="top" :content="userList.join()">
              <el-select size="mini" multiple collapse-tags v-model="userList" disabled>
                <el-option v-for="item in ruleForm.candidate.info" :key="item.userId" :label="item.userName" :value="item.userId"></el-option>
              </el-select>
            </el-tooltip>
          </el-form-item>
        </el-col>
      </el-form-item>
      <el-form-item :label="$t('product.setting.qrCodeSet.label6')" required>
        <el-select size="mini" v-model="ruleForm.distributePriority" disabled>
          <el-option :label="$t('product.setting.qrCodeSet.label11')" :value="1"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
export default {
  name:'rule-dialog',
  data(){
    return{
      // TODO：中文判断，待定
      provinceList:['北京','天津','上海','重庆','内蒙古','广西','西藏','宁夏','新疆','河北','山西','辽宁','吉林','黑龙江','江苏','浙江','安徽','福建','江西','山东','河南','湖北','湖南','广东','海南','四川','贵州','云南','陕西','甘肃','青海','香港','澳门','台湾'],
      groupList:[
        {label:this.$t('common.base.userTypes.designatedUser'),value:'user'},
        {label:this.$t('common.base.userTypes.designatedRole'),value:'role'},
        {label:this.$t('common.base.userTypes.designatedService'),value:'tag'},
        {label:this.$t('common.base.userTypes.designatedServiceManager'),value:'tagLeader'},
        {label:this.$t('common.base.userTypes.designatedCustomerService'),value:'cusTag'},
        {label:this.$t('common.base.userTypes.designatedCustomerServiceManager'),value:'cusTagLeader'},
        {label:this.$t('common.base.userTypes.designatedCustomerManager'),value:'customerManager'}
      ],
    }
  },
  props:{
    ruleForm:{
      type:Object,
      default:()=>{}
    },
    userList:{
      type:Array,
      default:()=>[]
    },
    ruleDialog:{
      type:Boolean,
      default:false
    }
  },
  methods:{
    beforeClose(){
      this.$emit('close');
    }
  }
}
</script>
